<template>
    <a-drawer
            title="元素操作"
            :visible="visible"
            placement="bottom"
            :closable="true"
            height="100%"
            @close="handleCancel">
        <div>
            <div style="display: flex;flex-flow: row-reverse nowrap;">
                <div style="padding: 10px">
                    <a-button style="background-color: red;color: white" @click="batchSave">保存</a-button>
                </div>
                <div style="padding: 10px">
                    <a-button type="primary" @click="fnAddItem">新增</a-button>
                </div>
            </div>
            <a-table
                    ref="table"
                    bordered
                    size="middle"
                    rowKey="id"
                    :columns="columns"
                    :scroll="{x:1200,y:600}"
                    :pagination="false"
                    :dataSource="dataSource"
                    :loading="loading">
                <template v-for="col in columns" :slot="col.dataIndex" slot-scope="text, record">
                    <div :key="col.id">
                        <a-input
                                v-if="record.editable"
                                style="margin: -5px 0"
                                :value.sync="text"
                                @change="e => handleChange(e.target.value, record.id, col.dataIndex)"/>
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>

                <template slot="opt" slot-scope="text, record">
                    <div class="editable-row-operations">
                        <span v-if="record.editable">
                          <a @click="() => save(record.id)">确定</a>
                            <a-divider type="vertical"></a-divider>
                          <a-popconfirm title="确定取消编辑?" @confirm="() => cancel(record.id)">
                            <a>取消</a>
                          </a-popconfirm>
                        </span>
                        <span v-else>
                            <a :disabled="editingKey !== ''" @click="() => edit(record.id)">编辑</a>
                            <a-divider type="vertical"/>
                            <a-popconfirm title="确定删除元素?" @confirm="() => delet(record.id)">
                                <a style="color: red">删除</a>
                            </a-popconfirm>
                        </span>
                    </div>
                </template>

            </a-table>
        </div>
    </a-drawer>

</template>

<script>
export default {
  data() {
    return {
      cacheData: [],
      editingKey: '',
      visible: false,
      record: '',
      columns: [
        {
          title: '注释',
          align: "center",
          width: 200,
          dataIndex: 'note',
          scopedSlots: { customRender: 'note' }
        }, {
          title: '列类型',
          align: "center",
          dataIndex: 'columnType',
          width: 200,
          scopedSlots: { customRender: 'columnType' }
        }, {
          title: 'java类型',
          align: "center",
          dataIndex: 'javaType',
          width: 200,
          scopedSlots: { customRender: 'javaType' }
        },
        { title: '操作', width: 200, fixed: 'right', scopedSlots: { customRender: 'opt' } }
      ],
      dataSource: [],
      loading: false,
      url: {
        baseUrl: 'codeGenerator/generatorTypeMapper/'
      }
    }
  },
  methods: {
    batchSave() {
      let _dataList = this.dataSource.concat([])
      _dataList.forEach(item => { if (item.id.indexOf('fake_') != -1) item.id = undefined })
      this.Atm.postAction(this.url.baseUrl + 'saveOrUpdate', _dataList).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    fnAddItem() {
      let keys = []
      this.columns.forEach(item => {
        let _data = {}
        _data[item.dataIndex] = ''
        keys.push(_data)
      })
      let item = Object.assign({ id: 'fake_' + this.randomUUID() }, ...keys)
      Object.assign(item, { typeMapperGroupId: this.record.id })
      this.dataSource.push(item)
      this.cacheData.push({ ...item })
    },
    delet(key) {
      this.Atm.deleteAction(this.url.baseUrl + 'delete', { id: key }, 'form').then(res => {
        if (res.success) {
          this.$message.success(res.message)
          let _tmpDataList = this.dataSource.filter(item => item.id != key)
          this.dataSource = _tmpDataList
          this.cacheData = [..._tmpDataList]
        } else {
          this.$message.error(res.message)
        }
      })
    },
    edit(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.id)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.dataSource = newData;
      }
    },
    save(key) {
      const newData = [...this.dataSource];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.id)[0];
      const targetCache = newCacheData.filter(item => key === item.id)[0];
      if (target && targetCache) {
        delete target.editable;
        this.dataSource = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.id)[0];
      this.editingKey = '';
      if (target) {
        console.log(this.cacheData.filter(item => key === item.id)[0])
        Object.assign(target, this.cacheData.filter(item => key === item.id)[0]);
        delete target.editable;
        this.dataSource = newData;
      }
    },
    handleChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.id)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    showItem(record) {
      this.record = record
      this.visible = true
      this.$nextTick(() => {
        this.loadData()
      })
    },
    handleCancel() {
      this.visible = false
    },
    loadData() {
      if (this.record) {
        this.Atm.getAction(
          this.url.baseUrl + 'list',
          {
            typeMapperGroupId: this.record.id,
            size: 999,
            current: 1
          }
        ).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.cacheData = [...this.dataSource];
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
